<!--
 * Date: 2018年10月23日 13:28:06
 * LastEditors: lvyou
 * LastEditTime: 2019年11月25日 18:39:11
 * FilePath: \youlinweb-master\src\pages\pointsmall\goodsdetail.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
  <div>
    <ylheader :leftsvg='true' :title="'详情'" ></ylheader>
    <deletepopup :poptext="'确定要兑换吗?'" @candelete="goexchange" @cancledelete="cancleexchange" :isshowdeletepopup="showdelete"  @deleteshow="deleteshow"></deletepopup>
    <div class="loadmore-container" ref="goodsdetailWrapper">
      <div class="loadmore-ul">
        <img  v-lazy.container ="data.picUrl" class="gd-img"> 
        <div class="gd-t">
          <p class="gd-t-t">{{data.name}}</p>
          <div class="gt-t-p v-c">
            <span class="yl-my-lvb lvb-icon"></span>
            <span style="margin-top:0.02rem">{{data.price}}</span>
            <span class="originprice">原价：{{data.originalPrice}}</span>
          </div>
        </div>
        <div v-html="data.explain" class="gd-des"></div>
        <p style="padding-bottom:1rem;"></p>
      </div>
    </div>  
    <!-- <div class="gd-bottom a-c" @click="exchangeGoods" :class="[{outofstock:bttext=='已兑完',nomoney:bttext=='绿币不足'}]">{{bttext}}</div> -->
    <div class="timecountdown a-c"  @click="exchangeGoods" :class="[{outofstock:countDownObj.countDownTips=='已兑完'||countDownObj.countDownTips=='已结束',nomoney:countDownObj.countDownTips=='绿币不足'}]">
      <span class="tips">{{countDownObj.countDownTips}}</span>
      <div class="detailcontainer a-c" v-if="countDownObj.distance>0">
        <span class="details a-c" >{{countDownObj.days}} </span>天
        <span class="details a-c">{{countDownObj.hours}} </span>时
        <span class="details a-c">{{countDownObj.minutes}} </span>分
        <span class="details a-c" >{{countDownObj.seconds}} </span>秒
      </div>
    </div>
  </div>
</template>
<script>
import api from "src/api/index";
import ylheader from "src/components/yl-header.vue";
import deletepopup from "src/components/deletepopup.vue";
import { mapState, mapMutations } from "vuex";
import { Indicator } from "mint-ui";
export default {
name:"goodsdetail",
  data(){
      return{
        data:"",
        list:[],
        bttext:"",
        countDownObj:{countDownTips:"加载中...",days:"",hours:"",minutes:"",seconds:""},
        showdelete:false,
      }
  },
  components:{
      api,
      ylheader,
      deletepopup,
  },
  computed: {
    ...mapState(["usercoin"])
  },
  beforeRouteLeave(to, from,next){
    clearInterval(this.countDownObj.timer);
    next();
  },
  mounted(){
    this.getGoodsDetail().then(data=>{
      this.initScroll();
    }).then(data => {
      this.$nextTick(() => {
        setTimeout(() => {
          this.myscroll.refresh();
        }, 800);
      })
    });
  },
  methods:{
    ...mapMutations(['changeusercoin']),
    init(){
      const tempStartTime = new Date(this.data.exchangeStartTime.replace(/-/g,'/')).getTime();
      const tempEndTime = new Date(this.data.exchangeEndTime.replace(/-/g,'/')).getTime();
      const tempnow = new Date().getTime();
        // Find the distance between now an the count down date
       const tempStartDistance = tempStartTime - tempnow;
       const tempEndDistance = tempEndTime - tempnow;
      if(tempStartDistance>0){
        this.countDownObj.noendtip = "距离开始"
        this.countDownObj.endtip = ""
        this.countDownObj.counttime = this.data.exchangeStartTime
         this.$util.getCountDown(this.countDownObj);
      }else if(tempEndDistance<0){
         this.countDownObj.countDownTips="已结束";
      }else if(this.data.stock<1){
        this.countDownObj.countDownTips="已兑完";
      }else if(parseInt(this.data.price)>this.usercoin){
        this.countDownObj.countDownTips="绿币不足";
      }else{
        this.countDownObj.countDownTips="马上兑换";
      }
    },
    getGoodsDetail(){
        let p = new Promise((resolve, reject) => {
          api.getGoodsDetail({goodsId:this.$route.query.goodsId}).then(res=>{
            if(res.success){
                this.data = res.data;
                this.data.price = this.data.price.toFixed(2);
                this.data.originalPrice = this.data.originalPrice.toFixed(2);
                this.init();
            }
            resolve("商品详情......");
          })
        })
        return p;
    },
    exchangeGoods(){
      if(this.countDownObj.countDownTips=="已兑完"){
          this.$toast("对不起，该商品已兑完");
      }else if(this.countDownObj.countDownTips=="已结束"){
          this.$toast("对不起，兑换已结束");
      }else if(this.countDownObj.countDownTips=="绿币不足"){
          this.$toast("对不起，您的绿币不足");
      }else if(this.countDownObj.countDownTips=="距离开始"){
          this.$toast("对不起，兑换还未开始");
      }else{
        this.showdelete=true;
      }

    },
       //初始化scroll
    initScroll() {
      let p = new Promise((resolve, reject) => {
        let goodsdetailWrapper = this.$refs.goodsdetailWrapper;
        localStorage.tempPageHeight = document.getElementsByClassName(
          "loadmore-ul"
        )[0].scrollHeight;
        let _this = this;
        this.$nextTick(() => {
          _this.myscroll = new iScroll(goodsdetailWrapper, {
            preventDefault: false,
            onScrollMove: function() {
            },
            onScrollEnd: function() { },
            onScrollStart: function() {
              if (
                localStorage.tempPageHeight !=
                document.getElementsByClassName("loadmore-ul")[0].scrollHeight
              ) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-ul"
                )[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll");
        });
      });
      return p;
    },
    goexchange(){
      this.showdelete = false;
      if(this.data.type==1){ //"type": （商品类型1实物商品，2话费充值，3红包,4挂件）
          this.$router.push({path:"/address",query:{id:this.$route.query.goodsId,tag:0,price:parseInt(this.data.price)}});
      }else if(this.data.type==2){
          this.$router.push({path:"/writephone",query:{id:this.$route.query.goodsId,price:parseInt(this.data.price),tag:0}});
      }else if(this.data.type==3){
          Indicator.open();
          setTimeout(()=>{this.goExchangeGoods()},2000);
      }else if(this.data.type==4){
          Indicator.open();
          setTimeout(()=>{this.exchangePendant()},2000);
      }
    },
    goExchangeGoods(){
      api.exchangeGoods({goodsId:this.$route.query.goodsId}).then(res=>{
        Indicator.close();
        if(res.success){
          this.$util.saveFootPrint({actType:18,typeValue:this.$route.query.id});//用户轨迹
          this.changeusercoin(this.usercoin-parseInt(this.data.price));
          this.$router.push({path:"/submitresult",query:{tag:0}});
        }else{
          this.$toast(res.msg);
        }
      }).catch(error=>{
        Indicator.close();
      })
    },
    exchangePendant(){//兑换挂件
      api.exchangePendant({goodsId:this.$route.query.goodsId}).then(res=>{
      Indicator.close();
        if(res.success){
          this.$toast("兑换成功")
        }else{
          this.$toast(res.msg);
        }
      }).catch(error=>{
        Indicator.close();
      })
    },
    cancleexchange(){
      this.showdelete = false;
    },
    deleteshow(data){
        this.showdelete=data;
    },
  }
}
</script>
<style lang="less">
.gd-des{
  img{
    max-width: 100%!important;
     display: block
  }
}
</style>

<style lang="less" scoped>
.timecountdown{
  
 height: 1rem;
  position: fixed;
  bottom: 0;
  width: 100%;
  color: white;
  font-weight: bold;
  font-size: 0.36rem;
  background-color: #fc8164;
  box-shadow:8px 0px 20px rgba(161,72,61,0.2);
  .tips{
    padding-right: 0.1rem;
    font-size: 0.3rem;
  }
  .detailcontainer{
    display: inherit;
    .details{
     margin:0 0.1rem;
     width:0.45rem;
     height: 0.45rem;
     padding-top:0.02rem;
     background-color: rgba(209, 101, 86, 0.87);
     border-radius: 50%;
     font-size: 0.28rem;
    }
  }
}

//兑换商品原价
.originprice{
    padding-left: 0.24rem;
    text-decoration: line-through;
    font-size: 0.26rem;
    color: #999999;
  }
.gd-img{
  width: 100%;
  height: 4.4rem;
  margin-bottom: -0.06rem;
}
.gd-t{
  padding:0.18rem 0.3rem 0.15rem;
  background: #ffffff;
  margin-bottom: 0.2rem;
  .gd-t-t{
    font-size: 0.4rem;
    color:#333333;
  }
  .gt-t-p{
    margin-top: 0.1rem;
    color: #fb685b;
    .lvb-icon{
      padding-bottom: 0.02rem;
      margin-top:0.05rem
    }
  }
}
.gd-des{
  padding:0.3rem;
  background: #ffffff;
  line-height: 0.45rem;
  img{
    max-width: 100%!important;
    display: block;
  }
}
.gd-bottom{
  height: 1rem;
  position: fixed;
  bottom: 0;
  width: 100%;
  color: white;
  font-weight: bold;
  font-size: 0.36rem;
  background-color: #fc8164;
  box-shadow:8px 0px 20px rgba(161,72,61,0.2);
}
.outofstock{
  	background-color: #ccc7c6;
	box-shadow: 0px -8px 20px 0px 
		rgba(161, 154, 153, 0.2);
}
.nomoney{
  	background-color: #fca48f;
	box-shadow: 0px -8px 20px 0px 
		rgba(161, 72, 61, 0.2);
}
</style>


